<template>
  <div>
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <div class="form-container">
        <el-form ref="firstForm" :model="firstForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="宝贝名" prop="name">
            <el-input v-model="firstForm.name" placeholder="请输入宝贝名"/>
          </el-form-item>
          <el-form-item label="副标题" prop="pro_title">
            <el-input v-model="firstForm.pro_title" type="textarea" maxlength="60" show-word-limit placeholder="请输入副标题"/>
            <el-row style="color: #909399;font-size:12px">在宝贝详情页标题下展示卖点信息，建议60字以内</el-row>
          </el-form-item>
          <!--            <el-form-item v-permission="['ADMIN', 'SHOW_SUPPLIERS']" label="所属供应商" prop="supplier_id">-->
          <!--              <el-select v-model="firstForm.supplier_id" filterable placeholder="请选择供应商">-->
          <!--                <el-option-->
          <!--                  v-for="item in supplierList"-->
          <!--                  :key="item.supplier_id"-->
          <!--                  :label="item.supplier_name"-->
          <!--                  :value="item.supplier_id"/>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <el-form-item v-if="firstForm.parameter && firstForm.parameter.length > 0" label="宝贝参数">
            <div class="form-container-parameter">
              <!--宝贝参数，不兼容老的，根据名字去比较，如果没有就拿掉-->
              <el-row>
                <el-col v-for="(item, index) in firstForm.parameter" :span="12" :key="item.parameter_id">
                  <el-form-item
                    :label="item.parameter_name + ':'"
                    :prop="'parameter.' + index + '.content'"
                    :rules="[{ required: item.is_required, message: `请输入${item.parameter_name}`, trigger: 'blur' }]"
                    label-width="120px">
                    <el-input v-model="item.content" placeholder="请输入" @input="change($event)"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getProductParameterList, getLableListCascade } from '@/api/mall/commodity'
export default {
  mixins: [],
  props: {
    supplier: {
      type: Array,
      required: true
    },
    classify_id: {
      type: Array,
      required: true
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      parameterList: [],
      supplierList: [],
      labelList: [], // 公司标签数据，数据源
      selectList: [], // 选中数据的集合
      commodityLabels: [], // 传递过来的商品的标签
      // classify_id: [],
      firstForm: {
        name: '',
        supplier: '', // 所属供应商
        props: {},
        parameter: [],
        label_brand_ids: [],
        result: false
      },
      rules: {
        name: [
          { required: true, message: '请输入宝贝名', trigger: 'blur' }
        ],
        pro_title: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    supplier(value) {
      // 供应商列表信息
      this.supplierList = value
    },
    classify_id: {
      handler(newValue, oldName) {
        this.firstForm.classify_id = newValue
        this.renderingDom()
      },
      immediate: true
    },
    form(vlaue) {
      this.firstForm = this.form
      // 商品参数
      this.renderingDom()
      // 商品标签
      this.setCheckedLabel(this.firstForm.label_brand_ids)
    }
  },
  created() {
    // 获取商品标签列表，用于商品标签显示
    getLableListCascade().then(res => {
      this.labelList = res
      // 渲染商品标签
      if (this.firstForm.label_brand_ids) this.setCheckedLabel(this.firstForm.label_brand_ids)
    })
  },
  methods: {
    // 以下是商品标签的操作事件
    setCheckedLabel(data) {
      // 选中的值转换，转换为级联选择器认识的数据
      // 清空原复选框选中值
      this.selectList = []
      // 原数据空判断
      this.commodityLabels = (data || [])
      // 由于js数组是二维数组[[1,21],[1,22]]，后台存的数据是一维的[1, 21, 22]，且散状的
      // 观察可得，二维数组，每个数组的数据一定是两条，因此，遍历数据源的子节点数据，若等于一维的数据，则判断这是我们需要的数据
      // 也就是说，后面无论是几维数据，遍历数据源的最后一个节点的数据，若是与一维的数据相等，这就是我们要的数据。
      // 实现方式可以用递归，从数据源的第一个节点依次.push一直到最后一个节点相等了，这就是我们要的数据
      this.labelList.map(res => {
        const list = []
        this.recursionQuery(res, list)
      })
    },
    // data当前节点数据，list：转换后的数组
    recursionQuery(data, list) {
      // children存在，则不是最后一个节点,继续递归
      if (data.children) {
        // 当前节点id，存储
        list.push(data.value)
        // 继续遍历下一级
        data.children.map(info => {
          // 每次遍历产生新的数组
          const array = Object.assign([], (list))
          this.recursionQuery(info, array)
        })
      } else {
        // 最后一个节点，查询是否与商品标签匹配，匹配则存储
        this.commodityLabels.map(label => {
          if (label === data.value) {
            list.push(data.value)
            this.selectList.push(list)
          }
        })
      }
    },
    getCheckToList() {
      // 获取标签集合，标签集合转换
      // 原数据为，如：[[1,21],[1,22]]
      // [["a34a01af-1b2e-4891-a715-75adb93f4e4a", "42dca615-2542-4fbb-8ca3-fba32f42db6b"]
      // ["a34a01af-1b2e-4891-a715-75adb93f4e4a", "628d27e9-d2db-43be-8e1b-9200893f9478"]]
      // 转换为 [1, 21, 22]
      // 1.原数据 [[1,21],[1,22]]转换为 [1, 21, 1, 22]
      const list = []
      this.selectList.map(res => {
        res.map(info => {
          list.push(info)
        })
      })
      // 2.去重，返回
      return Array.from(new Set(list))
    },
    change(e) {
      this.$forceUpdate()
    },
    renderingDom() {
      // 在获取商品之后会将当前所选的分类id存在商品身上，因为时序问题，可能会先渲染该对象，但是分类id并未回填商品身上，所以返回
      // 当取到商品信息，会在父组件把分类id填写商品身上，此时需要请求后台获取当前分类下的参数，和原商品的参数对比，相同则回填内容
      if (!this.firstForm.classify_id) {
        return
      }
      // 获取参数，根据所选分类最后一级的分类id获取当前分类的参数信息
      const classifyId = this.firstForm.classify_id[this.firstForm.classify_id.length - 1]
      getProductParameterList({ 'variety_id': classifyId }).then(res => {
        // 参数字段不存在或为空，强制覆盖
        if (!this.firstForm.parameter) {
          this.firstForm.parameter = res
        } else {
          // 输入内容渲染，输入框数据需要从商品身上取
          const list = []
          for (const item of res) {
            for (const info of this.firstForm.parameter) {
              if (item.parameter_id === info.parameter_id) {
                item.content = info.content
              }
            }
            list.push(item)
          }
          this.firstForm.parameter = list
        }
        // 表单填写状态，未通过校验，该状态值为false
        this.firstForm.result = false
        // 强制刷新
        this.$forceUpdate()
      })
    },
    // 给父组件传递收取表单的值
    sendFirstMsg() {
      this.$refs['firstForm'].validate((valid) => {
        if (valid) {
          this.firstForm.result = true
        }
        // 获取宝贝标签内容
        this.firstForm.label_brand_ids = this.getCheckToList()
        this.$emit('msgEvent', this.firstForm)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form-container {
  width: 90%;
}
.box-card {
  margin-bottom: 10px;
}
.el-card__body {
  padding: 20px 20px 0 20px!important;
}
.form-container-parameter {
  background: #f3f3f3;
  padding: 20px 20px 0 0;
}
</style>
